import React, { Component } from 'react'

class HeaderNav extends Component {
  changeNavTab = navIndex => {
    this.props.setNavTab(navIndex)
  }

  render() {
    const { navIndex } = this.props
    return (
      <div className='category-header-nav'>
        <ul>
          <li onClick={() => this.changeNavTab(0)} className={navIndex === 0 ? 'active' : ''}>
            分类
          </li>
          <li onClick={() => this.changeNavTab(1)} className={navIndex === 1 ? 'active' : ''}>
            食材
          </li>
          <li className={navIndex === 0 ? 'slider' : 'slider right'}></li>
        </ul>
      </div>
    )
  }
}

export default HeaderNav
